<template>
  <el-card>
    <template #header>订单统计</template>
    <div class="content">
      <div style="width: 80%; height: 400px;" ref="box"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  mounted() {
    this.getline()
  },
  methods: {
    getline() {
      var myChart = echarts.init(this.$refs.box)
      var ROOT_PATH =
        'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
      var option = {
        backgroundColor: '#000',
        globe: {
          baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',

          shading: 'lambert',

          environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',

          atmosphere: {
            show: true
          },

          light: {
            ambient: {
              intensity: 0.1
            },
            main: {
              intensity: 1.5
            }
          }
        },
        series: []
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.block {
  .el-button {
    margin-left: 10px;
  }
  .demonstration {
    margin-right: 5px;
  }
}
.content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px 10px;
}
</style>
